<template>
   <CloudRow>
    <CloudCol :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">
      Col
    </CloudCol>
    <CloudCol :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">
      Col
    </CloudCol>
    <CloudCol :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">
      Col
    </CloudCol>
  </CloudRow>
</template>
<script>
export default {
  title: '8.其他属性的响应式  ',
  subTitle: 'span pull push offset order 属性可以通过内嵌到 xs sm md lg xl xxl 属性中来使用。其中 :xs="6" 相当于 :xs="{ span: 6 }"。',
  data() {
    return {}
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.ant-row {
  margin-bottom: 20px;
  color: #ffffff;
}
.ant-col {
  text-align: center;
}
.ant-row > div:not(.gutter-row):nth-child(odd) {
  background: rgba(0, 160, 233, 0.7);
}
.ant-row-flex > div:not(.gutter-row),
.ant-row > div:not(.gutter-row) {
  background: #00a0e9;
  padding: 16px 0;
}
</style>